<template>
    <div>
        <!--
            
            上传照片组件 需要注意几个地方
             一是照片上传地址代理  
             二是dialog的层级关系:modal-append-to-body="false" append-to-body 
        三是照片的初始值 
        四是，关闭弹窗，初始化fileList
    
    -->
        <el-dialog
        title="上传图片"
        :visible.sync="uploadDialogVisible"
        width="60%"
        :modal-append-to-body="false"
        append-to-body
        @close="onClose">
            <el-upload
            action="#"
            :auto-upload="false"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleOnSuccess"
            :on-change="handleOnSuccess"
            :file-list="fileList">
            <i class="el-icon-plus"></i>
            </el-upload>
        </el-dialog>
        <!-- 照片的预览 -->
        <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false"
        append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            uploadDialogVisible:false,
            dialogImageUrl: '',
            dialogVisible: false,
            callback:null,
            fileList:[]
        }
    },
    methods:{
        onClose(){
            this.fileList = []
            this.uploadDialogVisible = false
        },
        // 初始化上传弹窗和照片
        open(callback,url = false){
            this.callback = callback
            if(url){
                this.fileList.push({
                    name:url,
                    url
                })
            }
            this.uploadDialogVisible = true
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // TODO 暂时使用的是本地，没有上传到服务器，后期修改是需要注意
        handleOnSuccess(response, file, fileList){
            this.callback(response.url)
            // TODO 后期换为下面个
            // this.callback(file.url)
            this.uploadDialogVisible = false
        }
    }
}
</script>